<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button id="btn" style="position: fixed; left: 800px; top: 500px">按钮</button>
<img  src="img/8.jpg" height="700" width="700"/>
<p>这是一个段落</p>
</body>
<script>
    $("#btn").hover(function(){
            // 淡入
    //     $("img").fadeIn(2000);
        //向下 显示
        // $("img").slideDown(2000);
    }, function(){
    //淡出
    //     $("img").fadeOut(2000);
        //向上 隐藏
        // $("img").slideUp(2000);
    });

    $("#btn").click(function(){
        //淡入和淡出 切换
        // $("img").fadeToggle(1000);
        //向上和向下切换
        // $("img").slideToggle(2000);
        // 淡出 到 某数值
        // $("img").fadeTo("fast", 0.1);
        //实现 自定义效果
        // $("img").animate({height:"-=100px",width:"-=100px", opacity: 0.5}, 1000, function(){alert("该效果实现了");});
        // $("p").animate({fontSize: "+=5px", opacity: 0.1}, 1000);
        //给图片设置样式
        $("img").css("width", "200px").css("height", "200px");
    });

</script>
</html>